<template>
  <div>
    <div class="box">
      <el-button v-for="(item, index) in btnList" :key="index" @click="toggleBtn(item)">
        {{ item.label }}
      </el-button>
    </div>
    <DemoQueryForm v-if="activeId == 1" />
    <DemoModalForm v-if="activeId == 2" />
    <DemoTable v-if="activeId == 3" />
    <DemoTreeTable v-if="activeId == 4" />
    <DemoPagination v-if="activeId == 5" />
  </div>
</template>

<script setup lang="js">
import { ref } from "vue"
import DemoQueryForm from "./demo/demoQueryForm/demoQueryForm.vue";
import DemoModalForm from './demo/demoModalForm/demoModalForm.vue';
import DemoTable from './demo/demoTable/demoTable.vue';
import DemoTreeTable from './demo/demoTreeTable/demoTreeTable.vue';
import DemoPagination from "./demo/demoPagination/demoPagination.vue";

const btnList = [
  {
    value: 1, label: "搜索表单demo"
  },
  {
    value: 2, label: "弹框表单demo"
  },
  {
    value: 3, label: "表格demo",
  },
  {
    value: 4, label: "树表格demo",
  },
  {
    value: 5, label: "分页器",
  }
]

const activeId = ref(1)

// 切换按钮
const toggleBtn = (item) => {
  activeId.value = item.value
}
</script>
<style scoped lang="scss">
.box {
  display: flex;
  margin-bottom: 40px;
}
</style>